<template>
  <div class="about">
    <div>This is a axios page</div>
    <div v-if="list.length === 0">loading...</div>
    <div v-for="(item, index) in list" :key="index">
      {{ item.id }} - {{ item.name }} - {{ item.value }}
    </div>

    <h5>list2</h5>
    <div v-for="(item, index) in list2" :key="index">
      {{ item.id }} - {{ item.name }} - {{ item.value }}
    </div>
  </div>
</template>

<script lang="ts">
interface Item {
  id: number,
  name: string,
  value: number
}

interface IResponse {
  data: Array<Item>
}

import { Vue } from "vue-class-component";

import { getData } from '@/api/main'
export default class Axios extends Vue{
  list: Array<Item> = []
  list2: Item[] = [] // 两种定义方式
  mounted(): void {
    this.$http.get('http://124.223.69.156:3300/bigData').then(res => {
      this.list = res.data.data.slice(0, 30)
    })

    getData({ id: 's' }).then((res: any) => {
      this.list2 = res.data.slice(0, 10)
    })
  }
}
</script>
